<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <span
        v-if="isDeleteShow"
        @click="delHistory"
      >全部删除</span>
      &nbsp;&nbsp;
      <span
        v-if="isDeleteShow"
        @click="isDeleteShow = false"
      >完成</span>
      <van-icon
        name="delete"
        @click="isDeleteShow = true"
        v-else
      />
    </van-cell>
    <van-cell
      v-for="(obj,i) in searchHistories"
      :key="i"
      @click="Assignment(obj)"
      :title="obj"
    >
      <van-icon
        name="close"
        @click="history(i)"
        v-if="isDeleteShow"
      />
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'SearchHistory',
  components: {},
  props: {
    // prop数据
    // 如果是普通数据（数字，字符串，布尔值）不能修改
    // 即便改了也不会传导给父组件
    // 如果是引入类型（数组，对象）
    //  可以修改，例如[].push(xxx)，对象.xxx=xxx
    //  不能重新赋值，xxx = []
    searchHistories: {
      type: Array,
      redirect: true
    }
  },
  data () {
    return {
      isDeleteShow: false // 控制删除显示状态
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    history (i) {
      // console.log(1)
      // this.$emit('deleteOne', i)
      this.searchHistories.splice(i, 1)
    },
    delHistory () {
      this.$emit('history')
    },
    Assignment (obj) {
      if (this.isDeleteShow) return
      this.$emit('Assignment', obj)
    }
  }
}
</script>

<style scoped lang="less"></style>
